import {designPage, reactive} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {Cascader} from "../../../../packages";
import treeData from '../../../data/tree.data.json';

export const demo1 = designPage(() => {

  const state = reactive({
    formData: {} as any
  });

  return () => (
    <DemoRow title="基本用法">
      <Cascader
        v-model={state.formData.name}
        data={treeData}
        keyField="id"
        labelField="name"
        childrenField="subs"
      />
      <Cascader
        v-model={state.formData.name}
        data={treeData}
        keyField="id"
        labelField="name"
        childrenField="subs"
      />
      <div>
        {state.formData.name?.map((i: any, index: number) => <div key={index}>{JSON.stringify(i)}</div>)}
      </div>
    </DemoRow>
  );
});


export const demo2 = designPage(() => {

  const state = reactive({
    formData: {
      name: [
        { "id": "2", "name": "福建省 2", },
        { "id": "2-2", "name": "宁德市 2-2", },
        { "id": "2-2-1", "name": "蕉城区 2-2-1" },
        { "id": "2-2-2", "name": "古田县 2-2-2" }
      ]
    } as any
  });

  return () => (
    <DemoRow title="多选">
      <Cascader
        width={400}
        v-model={state.formData.name}
        multiple
        data={treeData}
        keyField="id"
        labelField="name"
        childrenField="subs"
      />
      {/*<Cascader
        width={400}
        v-model={state.formData.name}
        multiple
        data={treeData}
        keyField="id"
        labelField="name"
        childrenField="subs"
      />*/}
      <div>
        {state.formData.name?.map((i: any, index: number) => <div key={index}>{JSON.stringify(i)}</div>)}
      </div>
    </DemoRow>
  );
});
